<!DOCTYPE html>
<html lang="zh-hans">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>Robam Cooker</title>
    <link href="../lib/font/material-icons.css?family=Material+Icons" rel="stylesheet" type="text/css">
    <link href="../lib/css/animate.css" rel="stylesheet">
    <link href="../lib/css/quasar.css" rel="stylesheet" type="text/css">
    <!-- import stylesheet -->
    <link rel="stylesheet" href="../lib/css/iview.css">
    <style>
      .td-cell:nth-child(n+2) {
        border-top: 1px solid #e8eaec
      }
      .ivu-table-cell {
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        -webkit-box-sizing: border-box;
      box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div id="q-app" style="padding: 10px">
      <i-table 
        border 
        height="500"
        :columns="columns" 
        :data="data" 
        :loading="tableLoading" 
        @on-sort-change="onSortChange" 
        @on-selection-change="selectionChange">
        <template slot-scope="props" slot="title">
          <Icon type="md-bookmark"></Icon>
          <strong>{{ props.row.title }}</strong>
        </template>
        <template slot-scope="props" slot="supAction">
          <div class="td-cell q-pa-sm" v-for="cellRow in props.row.arr">
            <i-button type="text" size="small" icon="ios-search" @click="supSearch(cellRow)"></i-button>
          </div>
        </template>
        <template slot-scope="props" slot="supName">
          <div class="td-cell q-pa-sm" v-for="cellRow in props.row.arr">{{ cellRow.supName }}</div>
        </template>
        <template slot-scope="props" slot="supCode">
          <div class="td-cell q-pa-sm" v-for="cellRow in props.row.arr">{{ cellRow.supCode }}</div>
        </template>
        <template slot-scope="props" slot="purGroupName">
          <div v-if="!props.row._rowEdit">
            <strong>{{ props.row.purGroupName }}</strong>
            <Icon class="cursor-pointer q-ml-sm" type="md-create" @click="props.row._rowEdit = true"></Icon>
          </div>
          <i-input v-else v-model="props.row.purGroupName">
            <Icon class="cursor-pointer" type="md-checkmark" slot="suffix" @click="editBlur(props)"></Icon>
          </i-input>
        </template>
        <template slot-scope="props" slot="fileName">
          <a>{{ props.row.trFileEntity?props.row.trFileEntity.fileName: '暂无' }}</a>
        </template>
      </i-table>
      <div class="row justify-end q-pa-sm">
        <Page 
          show-total
          show-elevator
          show-sizer
          :total="total"
          :current="serverPagination.page" 
          :page-size="serverPagination.rowsPerPage"
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
        ></Page>
      </div>
      <q-modal no-backdrop-dismiss v-model="addOrEditModal" :content-css="{minWidth: '44vw', minHeight: '400px',borderRadius: '4px'}">
        <q-modal-layout>
          <q-toolbar slot="header" color="white">
            <q-toolbar-title class="text-dark">
              <span>编辑</span>
            </q-toolbar-title>
            <q-btn flat @click="addOrEditModal = false">
              <q-icon name="close" color="dark"></q-icon>
            </q-btn>
          </q-toolbar>
        </q-modal-layout>
      </q-modal>
    </div>

    <!-- quasar and vue dep -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.js"></script>
    <script src="../lib/js/i18n.zh-hans.umd.min.js"></script>
    <!-- import iView -->
    <script src="../lib/js/iview.js"></script>
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts and utils -->
    <script src="../script/consts.js"></script>
    <script src="../script/utils.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/index.js"></script>
    <!-- 本地组件 -->

    <script>
      Quasar.i18n.set(Quasar.i18n.zhHans)
      Vue.use(window.vuelidate.default)
      console.log(Quasar.utils.uid());
      var app = new Vue({
        el: '#q-app',
        i18n: i18n,
        data: function () {
          return {
            addOrEditModal: false,
            tableLoading: false,
            editable: false,
            columns: [
              {
                type: 'expand',
                width: 50,
                fixed: 'left',
                render: function(h, parmas) {
                  return h('div', [
                    h('q-list', {
                      props: {
                        highlight: true
                      },
                      style: {
                        width: '300px'
                      },
                      class: {
                        'bg-white': true
                      }
                    }, [
                      h('q-item', [
                        h('q-item-side', [
                          h('q-item-tile', [
                            h('img', {
                              attrs: {
                                src: '../static/img/lio-stats.png'
                              },
                              style: {
                                height: '50px'
                              }
                            })
                          ])
                        ]),
                        h('q-item-main', 'Lio Messi'),
                        h('q-item-side', {
                          props: {
                            right: true
                          }
                        }, [
                          h('q-item-tile', {
                            props: {
                              icon: 'chat_bubble',
                              color: 'green'
                            }
                          })
                        ])
                      ]),
                      h('q-item-separator'),
                      h('q-item', [
                        h('q-item-side', [
                          h('q-item-tile', [
                            h('img', {
                              attrs: {
                                src: '../static/img/lio-stats.png'
                              },
                              style: {
                                height: '50px'
                              }
                            })
                          ])
                        ]),
                        h('q-item-main', 'Lio Messi'),
                        h('q-item-side', {
                          props: {
                            right: true
                          }
                        }, [
                          h('q-item-tile', {
                            props: {
                              icon: 'chat_bubble',
                              color: 'green'
                            }
                          })
                        ])
                      ])
                    ])
                  ])
                }
              },
              {
                type: 'selection',
                width: 50,
                align: 'center',
                fixed: 'left'
              },
              {
                title: '询价主题',
                slot: 'title',
                minWidth: 150,
                align: 'center',
                fixed: 'left'
              },
              {
                title: '询价编码',
                key: 'code',
                minWidth: 160,
                align: 'center',
                sortable: 'custom'
              },
              {
                title: '供应商信息',
                align: 'center',
                children: [
                  {
                    title: '操作',
                    align: 'center',
                    minWidth: 80,
                    slot: 'supAction'
                  },
                  {
                    title: '名称',
                    minWidth: 150,
                    slot: 'supName',
                    align: 'center',
                  },
                  {
                    title: '编码',
                    minWidth: 150,
                    slot: 'supCode',
                    align: 'center',
                  }
                ]
              },
              {
                title: '采购组信息',
                align: 'center',
                children: [
                  {
                    title: '名称',
                    minWidth: 150,
                    slot: 'purGroupName',
                    align: 'center',
                  },
                  {
                    title: '编码',
                    minWidth: 100,
                    key: 'purOrgCode',
                    align: 'center',
                  },
                ]
              },
              {
                title: 'TR信息',
                align: 'center',
                children: [
                  {
                    title: '文件名称',
                    minWidth: 200,
                    slot: 'fileName',
                    align: 'center'
                  },
                  {
                    title: 'URL',
                    minWidth: 200,
                    key: 'url',
                    align: 'center',
                    render: function (h, parmas) {
                      return h('div', parmas.row.trFileEntity?parmas.row.trFileEntity.url: '暂无')
                    }
                  },
                ]
              },
              {
                title: '操作',
                align: 'center',
                minWidth: 160,
                fixed: 'right',
                render: function(h, parmas) {
                  return h('div', [
                    h('i-button', {
                      props: {
                        type: 'primary',
                        size: 'small'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: function() {
                          console.log('点击了修改' + parmas.row.id);
                          app.addOrEditModal = true
                          // parmas.row._rowEdit = true
                        }
                      }
                    }, '编辑'),
                    h('i-button', {
                      props: {
                        type: 'error',
                        size: 'small'
                      },
                      on: {
                        click: function() {
                          console.log('点击了删除' + parmas.row.id);
                        }
                      }
                    }, '删除')
                  ])
                }
              },
            ],
            data: [
                  
            ],
            total: 0,
            serverPagination: {
              page: 1,
              rowsPerPage: 10,
              sortBy: '',
              order: ''
            }
          }
        },
        computed: {
          
        },
        watch: {
          
        },
        created: function() {
          this.listGet()
        },
        methods: {
          listGet: function() {
            var that = this
            this.tableLoading = true
            console.log(this.tableLoading);
            this.$api({
              method: 'post',
              url: '/manager/rfq/main/query',
              params: {
                page: this.serverPagination.page,
                rows: this.serverPagination.rowsPerPage,
                sort: this.serverPagination.sortBy,
                order: this.serverPagination.order==='normal'?'desc': this.serverPagination.order,
              },
              emulateQS: true,
              successCallback: function(data) {
                data.rows.forEach(function(d, i) {
                  d._rowEdit = false
                  if (i === 1 || i ===5) {
                    d.arr = [
                      {
                        supName: '供应商 -1',
                        supCode: 'sup -1'
                      },
                      {
                        supName: '供应商 -2',
                        supCode: 'sup -2'
                      }
                    ]
                  }
                })
                that.data = data.rows
                that.total = data.total
                that.tableLoading = false
              },
              errorCallback (err) {
                console.log(err)
              }
            })
          },
          onSortChange: function(column) {
            console.log(column);
            this.serverPagination.sortBy = column.key
            this.serverPagination.order = column.order
            this.listGet()
          },
          selectionChange: function(selection) {
            console.log(selection, '当前勾选的行');
          },
          pageChange: function(page) {
            this.serverPagination.page = page
            this.listGet()
          },
          pageSizeChange: function(pageSize) {
            this.serverPagination.rowsPerPage = pageSize
            this.listGet()
          },
          editBlur: function(props) {
            console.log(props);
            props.row._rowEdit = false
          },
          supSearch: function(cellRow) {
            console.log(cellRow)
          }
        }
      })
    </script>
  </body>
</html>
